<template>
    <div style="width: 100%;min-height: 200px;flex: 1;height: 100%" id="map"></div>
</template>
<script setup>
import {ref, onMounted} from 'vue' // vue相关方法
import {Map, View} from 'ol'      // 地图实例方法、视图方法
import Tile from 'ol/layer/Tile'    // 瓦片渲染方法
import {Tile as TileLayer, Vector as VectorLayer} from "ol/layer"
import OSM from 'ol/source/OSM'    // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import {XYZ, Vector} from "ol/source"
import 'ol/ol.css'                 // 地图样式
const map = ref(null) // 存放地图实例
function initMap() {
    // 地图实例
    map.value = new Map({
        target: 'map',                         // 对应页面里 id 为 map 的元素
        layers: [                              // 图层
            new TileLayer({
                source: new XYZ({
                    url: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=tk",
                }),
                name: "BaseMap",
            }),
            new TileLayer({
                source: new XYZ({
                    url: "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=tk",
                }),
                name: "BaseMap",
            }),
        ],
        view: new View({                       // 地图视图
            projection: "EPSG:4326",             // 坐标系，有EPSG:4326和EPSG:3857
            center: [114.064839, 22.548857],     // 深圳坐标
            minZoom: 10,                          // 地图缩放最小级别
            zoom: 12                             // 地图缩放级别（打开页面时默认级别）
        })
    })
}
onMounted(() => {
    initMap();
    // new Map({
    //   target: "map",
    //   layers: [
    //     new TileLayer({
    //       source: new OSM()
    //     })
    //   ],
    //   view: new View({
    //     projection: "EPSG:4326",    //使用这个坐标系
    //     center: [104.704968, 31.540962],  //西南科技大学
    //     zoom: 15
    //   })
    // });
})
</script>
<style scoped>
</style>
